<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">{{Lang.lang('商城')}}</view>
			<view class="back"></view>
			<!-- <view class="rule">规则</view> -->
		</view>
		<view class="clear_box"></view>

		<view class="page_content">
			<view class="banner_box">
				<image :src="goods_info.goods_img" mode="widthFix"></image>
			</view>
			<view class="goods_title">
				<view class="title">{{goods_info.goods_name}}</view>
				<!-- <view class="inventory">庫存 99 件</view> -->
			</view>
			<view class="page_title">
				<view class="title">{{Lang.lang('商品介紹')}}</view>
			</view>
			<view class="html">
				<view v-html="goods_info.content"></view>
			</view>
		</view>

		<view class="footer_box">
			<view class="footer_text">
				<view class="text">{{Lang.lang('售價')}}</view>
				<view class="num">{{goods_info.goods_price}}</view>
				<view class="type">YYDZ</view>
			</view>
			<view class="footer_menu" :data-url="'/pages/mall/submit?goods_id='+goods_info.id" @click="gotopage">{{Lang.lang('立即購買')}}
			</view>
		</view>



		<view class="suspension">
			<view class="menu" data-url="/pages/mall/order/order" @click="gotopage">
				<view class="icon iconfont icon-dingdan"></view>
				<view class="text">{{Lang.lang('訂單')}}</view>
			</view>
			<view class="menu" data-url="/pages/index/index" @click="gotopage02">
				<view class="icon iconfont icon-shouye"></view>
				<view class="text">{{Lang.lang('首頁')}}</view>
			</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				lang: 'en',
				link: '',
				pupu: false,
				scrrol: false,
				info: '',
				id: 0,
				goods_info: {

				}

			}
		},
		onLoad(options) {
			this.id = options.id
			this.loadData();
		},
		onShow() {
			// let that = this;
		},
		methods: {
			loadData() {
				let that = this;
				that.Net._post('api/shop/shopGoodsInfo', {
					goods_id: that.id
				}, res => {
					if (res.code == 200) {
						that.goods_info = res.data.info

					}
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
			gotopage02(e) {
				let url = e.currentTarget.dataset.url;
				uni.switchTab({
					url: url
				});
			},
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
	}
</script>

<style>
	.header {
		background-color: transparent !important;
	}

	.header .text {
		text-align: center;
	}

	.page_content {
		width: 92%;
		margin: 0 auto;
	}

	.scrrolHeader {
		width: 100%;
		background-color: #1A1A1A !important;

	}

	.banner_box {
		width: 100%;
	}

	.banner_box image {
		width: 100%;
	}

	.suspension {
		width: 16vw;
		border-radius: 16vw;
		background-color: #2A2A2A;
		padding: 4vw 3vw;
		position: fixed;
		right: 4%;
		bottom: 12%;
		z-index: 99;
	}

	.suspension .menu {
		width: 100%;
	}

	.suspension .menu:nth-child(1) {
		border-bottom: 1px solid #404040;
		padding-bottom: 4vw;
		margin-bottom: 4vw;
	}

	.suspension .menu .icon {
		font-size: 4.5vw;
		color: #fff;
		text-align: center;
	}

	.suspension .menu .text {
		font-size: 3.7vw;
		color: #fff;
		margin-top: 1vw;
		text-align: center;
	}

	.goods_title {
		width: 100%;
		margin-top: 4%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.goods_title .title {
		font-size: 4.5vw;
		font-weight: bold;
		color: #fff;
		flex: 1;
	}

	.goods_title .inventory {
		font-size: 3.5vw;
		color: #fff;
		width: 24vw;
		height: 10vw;
		border-radius: 4vw;
		background-color: #2A2A2A;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 3vw;
	}

	.page_title {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 4vw;
	}

	.page_title .title {
		font-size: 4.5vw;
		color: #fff;
		font-weight: bold;
		flex: 1;
	}

	.page_title .arrow {
		display: flex;
		align-items: center;
		font-size: 4vw;
		color: #fff;
	}

	.html {
		margin-top: 4%;
		font-size: 3.5vw;
		color: #B3B5B4;
		line-height: 6vw;
	}

	.footer_box {
		width: 100%;
		background-color: #1A1A1A;
		padding: 3vw 4%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.footer_box .footer_text {
		flex: 1;
		display: flex;
		align-items: center;

	}

	.footer_box .footer_text .text {
		color: #929292;
		font-size: 4vw;
		margin-right: 2vw;
		font-weight: bold;
	}

	.footer_box .footer_text .num {
		color: #FF2D55;
		font-size: 5vw;
		margin-right: 2vw;
		font-weight: bold;
	}

	.footer_box .footer_text .type {
		color: #fff;
		font-size: 4vw;
		font-weight: bold;
	}

	.footer_box .footer_menu {
		width: 40vw;
		background-color: #7752EC;
		height: 12vw;
		border-radius: 12vw;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 4vw;
		color: #fff;
		font-weight: bold;
	}
</style>